<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./swiper/css/swiper.min.css">
    <script src="./swiper/js/swiper.min.js"></script>
    <script src="./js/swiper.animate1.0.3.min.js"></script>
    <script src="./js/jquery-1.11.2.min.js"></script>
    <title>四</title>
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="page-cover">
                    <h1 class="ani title-1" swiper-animate-effect=" animate__animated animate__backInDown">Web前端语言快速崛起
                        <br> 行业应用不断扩张</h1>
                    <img class="p1 ani" swiper-animate-effect=" animate__animated animate__backInLeft"
                        swiper-animate-delay="0.5s" src="./images/a_11.jpg" alt="">
                    <img class="p1 ani" swiper-animate-effect=" animate__animated animate__backInRight"
                        swiper-animate-delay="0.5s" src="./images/a_13.jpg" alt="">
                    <img class="p1 ani" swiper-animate-effect=" animate__animated animate__backInLeft"
                        swiper-animate-delay="1s" src="./images/a_16.jpg" alt="">
                    <img class="p1 ani" swiper-animate-effect=" animate__animated animate__backInRight"
                        swiper-animate-delay="1s" src="./images/a_18.jpg" alt="">
                    <img class="p1 ani" swiper-animate-effect=" animate__animated animate__backInLeft"
                        swiper-animate-delay="1.5s" src="./images/a_21.jpg" alt="">
                    <img class="p1 ani" swiper-animate-effect="animate__animated animate__backInRight"
                        swiper-animate-delay="1.5s" src="./images/a_23.jpg" alt="">
                    <div class="ani button-1" swiper-animate-effect="animate__animated animate__backInUp"
                        swiper-animate-delay="2s">了解Web前端行业</div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="page-cover">
                    <img class="ani p2" swiper-animate-effect=" animate__animated animate__backInLeft"
                        swiper-animate-delay="0.5s" src="./images/1.jpg" alt="">
                    <img class="ani p2" swiper-animate-effect=" animate__animated animate__backInRight"
                        swiper-animate-delay="0.5s" src="./images/2.jpg" alt="">
                    <img class="ani p2" swiper-animate-effect=" animate__animated animate__backInLeft"
                        swiper-animate-delay="1s" src="./images/3.jpg" alt="">
                    <img class="ani p2" swiper-animate-effect=" animate__animated animate__backInRight"
                        swiper-animate-delay="1s" src="./images/4.jpg" alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="page-cover">
                    <p class="ani" swiper-animate-effect=" animate__animated animate__backInDown">谢谢观看</p>
                </div>
            </div>
        </div>
    </div>
    <div id="nextbtn">
        <img class="fadeInUp" src="./images/arrow.png" alt="">
    </div>
    <img src="./images/music-icon.png" id="music_icon" alt="">
    <audio src="./audio/music.mp3" id="audio"></audio>
    <script src="./js/playmusic.js"></script>
    <script>
        new Swiper('.swiper-container   ', {
            direction: 'vertical',
            on: {
                init: function () {
                    swiperAnimateCache(this); //隐藏动画元素 
                    swiperAnimate(this); //初始化完成开始动画
                },
                slideChangeTransitionEnd: function () {
                    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                    //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
                }
            }
        })
    </script>
</body>

</html>